<template>
    <div class="article-add-container">
        <div class="type-container" style="margin-bottom: 4px">
            <div class="el-input-group__prepend type">类型</div>
            <el-select class="select-type" v-model="detailData.type" placeholder="请选择">
                <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <el-row :gutter="20" justify="center">
            <el-col :span="12">
                <el-input placeholder="请输入内容" v-model="detailData.title" style="margin-bottom: 4px">
                    <template slot="prepend">标题</template>
                </el-input>
                <el-input placeholder="请输入内容" v-model="detailData.author" style="margin-bottom: 4px">
                    <template slot="prepend">作者</template>
                </el-input>
            </el-col>
        </el-row>

        <mavon-editor v-model="detailData.content" @save="addArticle" @imgAdd="imgUpload" class="editor-sty"
            :boxShadow="false" ref="md"></mavon-editor>
    </div>
</template>

<script>
    import moment from 'moment';
    import OSS from 'ali-oss'
    import md5 from 'md5-js'

    export default {
        name: "AddMechanism",
        data() {
            return {
                detailData: {
                    content: '',
                    title: '',
                    titleSrc: '',  // 标题图片地址
                    author: '',
                    type: null,
                },
                types: [
                    {
                        label: '角色',
                        value: 0
                    }, {
                        label: '食物',
                        value: 1
                    }, {
                        label: '自然',
                        value: 2
                    }, {
                        label: '动物',
                        value: 3
                    }, {
                        label: '装备',
                        value: 4
                    }]
            }
        },
        components: {
            // ossUpload
        },
        methods: {
            getDetailData() {
                this.axios.get('/rule/single', {
                    params: {
                        id: this.$route.query.id
                    }
                })
                    .then(res => {
                        this.detailData = res.data;
                    })
            },
            /**
             * 保存文章
             * @param mdVal 生成的markdown文档，可以用marked解析来展示
             */
            addArticle(mdVal) {
                let time = new Date();
                let formatTime = moment(time).format('YYYY-MM-DD');
                let _flag = this.$route.query.id ? "update" : "add";
                this.axios.post(`/rule/${_flag}`, {
                    _id: this.$route.query.id,
                    type: this.detailData.type,  // 0代表是动态，1代表是机制里的文章
                    title: this.detailData.title,
                    author: this.detailData.author,
                    time: formatTime,
                    content: mdVal,
                    version: this.$store.state.version
                })
                    .then(res => {
                        if (res.data.code === 0) {
                            this.$router.push('/mechanism-list');
                        } else {
                            this.$message.error(res.data.message);
                        }
                    });
            },
            /**
             * 图片上传
             */
            imgUpload(filename, $file) {
                // oss配置
                const client = new OSS({
                    endpoint: 'oss-cn-beijing.aliyuncs.com',
                    accessKeyId: "LTAI4FgrsFXo8ij335BxeRbp",
                    accessKeySecret: "oG0PWkV0qOeDoJQfwEHOqIvTp16S0x",
                    bucket: 'stavebox',
                });
                // 图片路径拼接，dirName其实就是定义存在oss的哪个虚拟文件夹下的
                let time = new Date();
                let hash = md5(time);
                let imgType = $file.type.split('/')[1];
                let hashName = 'Article/' + hash + '.' + imgType;
                // 将文件流上传至oss
                client.put(hashName, $file)
                    .then(res => {
                        let imgUrl = 'http://img.fireleaves.cn/' + res.name;
                        this.$refs.md.$img2Url(filename, imgUrl);
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }
        },
        activated() {
            this.getDetailData();
        }
    }
</script>

<style lang="scss">
    .article-add-container {
        .oss-upload-container {
            .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }

            .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }

            .avatar-uploader-icon {
                font-size: 36px;
                color: #8c939d;
                width: 560px;
                height: 120px;
                line-height: 120px;
                text-align: center;
            }

            .avatar {
                width: 560px;
                height: auto;
                display: block;
            }
        }
    }
</style>

<style lang="scss" scoped>
    .article-add-container {
        padding: 16px;

        .editor-sty {
            z-index: 1;
            height: 80vh;
        }

        .type {
            display: inline-block;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            width: 68px;
            box-sizing: border-box;
        }

        .type-container {
            display: flex;
            align-items: center;
            margin-bottom: 4px;
            padding-right: 10px;
            box-sizing: border-box;
            width: 50%;

            .type {
                flex-shrink: 0;
            }

            .select-type {
                flex-grow: 1;
            }
        }
    }
</style>